<script setup>
import { ref } from 'vue'
import { onMounted } from 'vue'
import ChatBox from "@/components/ChatBox.vue";
import ChatInput from "@/components/ChatInput.vue";

//引入静态数据
import { useAgent } from '@/stores/index.js'
// 引入静态图片路径
import avatar1 from '@/assets/img/avatar1.png'
import avatar2 from '@/assets/img/avatar2.png'
import avatar3 from '@/assets/img/avatar3.png'
import avatar4 from '@/assets/img/avatar4.png'
import avatar5 from '@/assets/img/avatar5.png'
import avatar6 from '@/assets/img/avatar6.png'

import { useAIStore } from '@/stores/modules/ai.js'
const aiStore = useAIStore()
const myAgent = useAgent()
const moreAgent = useAgent()

// 添加模态框相关的响应式变量
const showModal = ref(false)
const newAgentName = ref('')
const newAgentContent = ref('')

// 图片的数组路径
const avatarImages = [avatar1, avatar2, avatar3, avatar4, avatar5, avatar6]

// 创建智能体
const createAgent = () => {
  showModal.value = true
}

// 关闭模态框
const closeModal = () => {
  showModal.value = false
  newAgentName.value = ''
  newAgentContent.value = ''
}

// 确认创建智能体
const confirmCreate = () => {
  if (!newAgentName.value || !newAgentContent.value) {
    alert('请填写完整信息')
    return
  }

  // 随机选择头像
  const randomIndex = Math.floor(Math.random() * avatarImages.length)

  // 创建新的智能体
  const newAgent = {
    name: newAgentName.value,
    content: newAgentContent.value,
    avatar: avatarImages[randomIndex], // 随机选择头像 上传
  }

  // 添加到我的智能体列表
  myAgent.agentList.value.push(newAgent)

  // 关闭模态框
  closeModal()
}


const talkAgentSwitch = ref(true)
const talkToAgent = () => {
  talkAgentSwitch.value = false
  aiStore.setTalkID(-1)
  aiStore.setTalkList([])
  aiStore.setAIChatBoxSwitch(true)
}
onMounted(() => {
  // 装填静态数据
  myAgent.agentList.value = [
    {
      name: 'PPT助手',
      content:
        'PPT助手是一款基于ChatGPT的AI工具，可以生成PPT，视频，音频，图片等，并支持多种格式的导出。',
      avatar: avatar1,
    },
    {
      name: 'Java专家',
      content: 'Java专家是一款基于ChatGPT的AI工具，可以生成Java代码，并支持多种格式的导出。',
      avatar: avatar2,
    },
    {
      name: '前端工程师',
      content: '前端工程师是一款基于ChatGPT的AI工具，可以生成前端代码，并支持多种格式的导出。',
      avatar: avatar3,
    },
    {
      name: 'Python专家',
      content: 'Python专家是一款基于ChatGPT的AI工具，可以生成Python代码，并支持多种格式的导出。',
      avatar:avatar4,
    },
  ]
  moreAgent.agentList.value = [
    {
      name: '文章大师',
      content: '润色续写，下笔如有神~',
      avatar: avatar1,
    },
    {
      name: '健身教练',
      content: '个性化指定训练以及饮食计划',
      avatar: avatar2,
    },
    {
      name: '旅行达人',
      content: '专注于短途旅行规划和小众徒步路线探索',
      avatar: avatar3,
    },
    {
      name: 'PPT助手',
      content: '根据PPT主体，快速写出大纲',
      avatar: avatar4,
    },
    {
      name: 'Java专家',
      content: '精通Java语言',
      avatar: avatar5,
    },
    {
      name: '前端工程师',
      content: '精通HTML、Css、Js，掌握各种前端框架',
      avatar: avatar6,
    },
  ]
})
</script>

<template>
  <div class="container">
    <div class="left">
      <div class="head">我的智能助手</div>
      <div class="body">
        <a class="item" v-for="(item, index) in myAgent.agentList.value" :key="index" @click="talkToAgent">
          <img :src="item.avatar" class="avatar" alt="" />
          <div class="title">{{ item.name }}</div>
          <img src="@/assets/icon/more.png" alt="" class="more-icon" />
        </a>
      </div>
    </div>

    <div class="right" :class="{rightActive: talkAgentSwitch}">
      <div style="
        background: rgba(253, 253, 254, 1);
        height: 100%;
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding: 25px 50px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        border-radius: 20px;" v-if=" talkAgentSwitch ">
        <div class="head">更多智能助手</div>
        <div class="banner">
          <div class="banner-text">
            <div class="b-t-title">自定义创建智能助手</div>
            <div class="b-t-desc">创建你的专属知心助手</div>
            <a class="b-t-button" @click="createAgent()">创建智能助手</a>
          </div>

          <img src="@/assets/img/agentBanner.png" class="banner-img" alt="" />
        </div>
        <div class="r-agent">
          <div class="r-a-item" v-for="item in moreAgent.agentList.value">
            <img :src="item.avatar" class="r-a-left" />
            <div class="r-a-right">
              <div class="r-a-r-title">{{ item.name }}</div>
              <div class="r-a-r-desc">{{ item.content }}</div>
            </div>
          </div>
        </div>

        <div class="r-more">更多智能体即将陆续上线...</div>
      </div>

      <div v-else style="
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;">
        <!--  聊天气泡  -->
        <ChatBox></ChatBox>

        <!-- 输入框 -->
        <ChatInput></ChatInput>
      </div>

    </div>

    <!-- 修改模态框部分 -->
    <div class="modal-overlay" v-if="showModal" @click.self="closeModal">
      <div class="modal-content">
        <div class="modal-robot-icon">
          <div class="robot-icon"><img src="@/assets/icon/robot.png" alt="robot" /></div>
        </div>
        <span class="edit-box">
          <img src="@/assets/icon/edit.png" alt="" />
        </span>

        <div class="modal-header">
          <h3>创建智能助手</h3>
        </div>
        <div class="modal-body">
          <div class="form-item">
            <label>
              <img src="@/assets/icon/four-pointed-star.png" alt="" />
              名称
            </label>
            <input type="text" v-model="newAgentName" placeholder="给智能助手起个名字吧~" />
          </div>
          <div class="form-item">
            <label>
              <img src="@/assets/icon/four-pointed-star.png" alt="" />
              设定</label>
            <textarea v-model="newAgentContent" placeholder="描述一下智能助手的设定~"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="closeModal">取消</button>
          <button class="confirm-btn" @click="confirmCreate">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .left {
    top: 10%;
    width: 20%;
    min-width: 300px;
    height: 86vh;
    box-shadow: 0 5px 15px rgba(201, 201, 201, 0.2);
    border-radius: 20px;
    background: rgba(253, 253, 254, 1);
    overflow: hidden;

    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      width: 100%;
      height: 10%;
      border-bottom: #e1e1e1 solid 1px;
      overflow: hidden;
    }

    .body {
      width: 100%;
      height: 90%;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 5px auto 0;
        width: 86%;
        height: 9%;
        min-height: 67px;

        .avatar {
          width: 44px;
          height: 44px;
          border-radius: 50%;
        }

        .more-icon {
          width: 24px;
          height: 24px;
        }

        .title {
          font-size: 18px;
        }
      }
    }
  }

  .right {
    width: 67%;
    min-width: 1000px;
    height: 87vh;
    border-radius: 20px;
    .head {
      font-size: 24px;
      font-weight: bold;
    }
    .banner {
      width: 100%;
      height: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .banner-text {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-left: 30px;

        .b-t-title {
          font-size: 30px;
          color: #333333;
          letter-spacing: 1px;
          margin-bottom: 30px;
        }

        .b-t-desc {
          font-size: 18px;
          color: #4188d8;
          letter-spacing: 1px;
          margin-bottom: 60px;
        }

        .b-t-button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 200px;
          height: 50px;
          border-radius: 25px;
          color: white;
          font-size: 18px;
          letter-spacing: 1px;
          font-weight: 200;
          background: linear-gradient(
            270deg,
            rgba(198, 173, 255, 1) 0%,
            rgba(102, 170, 237, 1) 100%
          );
        }
      }

      .banner-img {
        width: 506px;
        height: 294px;
      }
    }
    .r-agent {
      width: 100%;
      height: 45%;
      min-height: 350px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 70px;
      margin-top: 20px;

      .r-a-item {
        border-radius: 10px;
        background: linear-gradient(
          90deg,
          rgba(51, 108, 242, 0.03) 0%,
          rgba(136, 15, 184, 0.03) 100%
        );
        border: 1px solid rgba(194, 194, 194, 1);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 15px;

        .r-a-left {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          margin-right: 20px;
        }

        .r-a-right {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          gap: 8px;

          .r-a-r-title {
            font-size: 17px;
            color: #181414;
            letter-spacing: 1px;
          }

          .r-a-r-desc {
            font-size: 14px;
            color: #9b9b9c;
            font-weight: 400;
            letter-spacing: 1px;
          }
        }
      }
    }
    .r-more {
      width: 100%;
      height: 5%;
      font-size: 16px;
      color: #c5c5c5;
      letter-spacing: 2px;
      margin-top: 50px;
    }
  }

  .rightActive{
    box-shadow: 0 5px 15px rgba(201, 201, 201, 0.2);
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  width: 500px;
  border-radius: 15px;
  padding: 20px;
  position: relative;

  // 添加机器人图标样式
  .modal-robot-icon {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    padding: 10px;
    border: 10px solid #a4acf9;
    display: flex;
    align-items: center;
    justify-content: center;

    .robot-icon {
      width: 50px;
      height: 50px;

      img {
        width: 100%;
      }
    }
  }

  .edit-box {
    position: absolute;
    top: 35px;
    right: 200px;
  }
}

.modal-header {
  margin-top: 40px;
  text-align: center;
  position: relative;

  h3 {
    font-size: 20px;
    color: #333;
    margin: 0;
    font-weight: normal;
  }

  .close-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}

.modal-body {
  margin-top: 20px;

  .form-item {
    margin-bottom: 20px;

    label {
      display: block;
      margin-bottom: 8px;
      color: #666;
      font-size: 14px;
      position: relative;
      padding-left: 10px;
      display: flex;
      align-items: center;

      img {
        margin-right: 10px;
      }
    }

    input,
    textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #eee;
      border-radius: 10px;
      font-size: 14px;
      background: #f8f8f8;

      &::placeholder {
        color: #999;
      }

      &:focus {
        outline: none;
        border-color: #6366f1;
        background: white;
      }
    }

    textarea {
      height: 120px;
      resize: none;
    }
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;

  button {
    padding: 8px 32px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .cancel-btn {
    background: white;
    border: 1px solid #ddd;
    color: #666;

    &:hover {
      background: #f5f5f5;
    }
  }

  .confirm-btn {
    background: #8589ff;
    border: none;
    color: white;

    &:hover {
      background: #4f46e5;
    }
  }
}
</style>
